<template>
    <div class="list-recommend">
        <span class="title_recom">{{ $t('premium_recommendation') }}</span>
        <!-- <span style="color: #545454;"> 即將上綫</span> -->
        <div class="list-inner">
            <div class="list_item" v-for="item in game_list" :key="item.id" @click="$router.push('/home/gameCenter/'+item.id)">
                <div class="list_item_img">
                    <img width="100%" height="140" :src="$baseUrl+item.home_jp_img" alt="">
                </div>
                <p class="content-des">{{ item.desc }}</p>
                <div class="card-content-title">
                    <p>{{ item.title }}</p>
                    <div class="card-content_footer">
                        <svg t="1718248843741" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4259" width="24" height="24"><path d="M335.008 916.629333c-35.914667 22.314667-82.88 10.773333-104.693333-25.557333a77.333333 77.333333 0 0 1-8.96-57.429333l46.485333-198.24a13.141333 13.141333 0 0 0-4.021333-12.864l-152.16-132.586667c-31.605333-27.52-35.253333-75.648-8.234667-107.733333a75.68 75.68 0 0 1 51.733333-26.752L354.848 339.2c4.352-0.362667 8.245333-3.232 10.026667-7.594667l76.938666-188.170666c16.032-39.2 60.618667-57.92 99.52-41.461334a76.309333 76.309333 0 0 1 40.832 41.461334l76.938667 188.16c1.781333 4.373333 5.674667 7.253333 10.026667 7.605333l199.712 16.277333c41.877333 3.413333 72.885333 40.458667 69.568 82.517334a76.938667 76.938667 0 0 1-26.08 51.978666l-152.16 132.586667c-3.541333 3.082667-5.141333 8.074667-4.021334 12.853333l46.485334 198.24c9.621333 41.013333-15.36 82.336-56.138667 92.224a75.285333 75.285333 0 0 1-57.525333-9.237333l-170.976-106.24a11.296 11.296 0 0 0-12.010667 0l-170.986667 106.24z" fill="#6fc4f1" p-id="4260"></path></svg>
                        <span class="score">{{item.average_score}}</span>
                        <!-- <span>
                            <span class="num">29290</span>
                            <span class="num">人評</span>
                        </span> -->
                    </div>
                </div>
            </div>

            <div style="width: 272px;" class="list_item" v-if="game_list.length < 3">
                <div class="list_item_img">
                    <img width="100%"  src="../../assets/soon.png" alt="">
                </div>
            </div>
            <div style="width: 272px;" class="list_item" v-if="game_list.length < 3">
                <div class="list_item_img">
                    <img width="100%"  src="../../assets/soon.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import axios from '@/utils/api'
import { reactive } from "vue";

const game_list = reactive([])
const getList = async () =>{
    const list = await axios.get('/gameBoutiqueList')
    Object.assign(game_list,list.data)
    console.log(game_list);
}
getList()
</script>

<style lang="less" scoped>
.list-recommend {
    margin-top: 20px;
    .title_recom {
        font-size: 24px;
        color: rgba(0, 0, 0, .8);
        letter-spacing: 1px;
        line-height: 32px;
    }

    .list-inner {
        height: 250px;
        display: flex;
        justify-content: space-between;
        .list_item:hover{
            .content-des{
                height: 20px;
                opacity: 1;
            }
            transform: scale(1.02,1.08);
            box-shadow: 0 8px 16px 0 rgba(5, 45, 75, .2);
          
        }
        .list_item {
            // width: 272px;
            // height: 200px;
            box-sizing: border-box;
            border: 1px solid rgba(0, 0, 0, .1);
            border-radius: 10px;
            margin: 16px 0;
            transition: .3s;
            cursor: pointer;
            // flex: 0.24;
            .content-des{
                transition: .3s;
                height: 0;
                opacity: 0;
                font-size: 14px;
                color: rgba(0, 0, 0, .6);
                box-sizing: border-box;
                padding: 0 20px 0;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                width: 270px;
                margin: initial;
                margin-top: 5px;
            }
            .list_item_img img{
                border-radius: 10px 10px 0 0;
            }
            .card-content-title{
                margin: 10px 0 0;
                display: flex;
                p{
                    color: rgba(0, 0, 0, .85);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    margin-left: 20px;
                    width: 165px;
                }
                .card-content_footer > *{
                    margin: initial;
                }
                .card-content_footer{
                    width: 27%;
                    // min-width: 150px;
                    padding: 0 18px 13px 0;
                    display: flex;
                    justify-content: end;
                    height: 22px;
                    line-height: 22px;
                    margin: initial;
                    align-items: center;
                    .score{
                        font-family: Helvetica;
                        font-size: 20px;
                        color: rgba(0, 0, 0, .85);
                        padding: 0 4px;
                    }
                    .num{
                        font-size: 12px;
                        color: rgba(0, 0, 0, .35);
                    }
                    svg{
                        position: relative;
                        left: -3px;
                    }
                }
            }
            
        }
    }
}
</style>